<template>
	<div>
		<div class="right-container">
			<div class="right-container-stage" v-show="isView==false">
				<div id="sub-app">
					<!-- <a-alert style="margin:8px 16px;text-align:left;" message="提示用的文字区域" type="info" close-text="x" /> -->
					<div class="page-body">
						<a-tabs default-active-key="1" @change="callback" size="small">
							<a-tab-pane key="1" tab="概览">
								<div class="overview">
									<div class="dashboard-main">
										<a-card title="我的项目">
											<div class="btn_grp" slot="extra">
												<a-dropdown>
													<a-menu slot="overlay" @click="handleMenuClick">
														<a-menu-item key="1">
															1st item
														</a-menu-item>
														<a-menu-item key="2">
															2nd item
														</a-menu-item>
														<a-menu-item key="3">
															3rd item
														</a-menu-item>
													</a-menu>
													<a-button type="link"> 更多操作
														<a-icon type="down" />
													</a-button>
												</a-dropdown>
												<a-button shape="circle" type="link" icon="loading-3-quarters" />
											</div>
											<screen />
											<div class="card-content">
												<div class="my-project-head">
													<div style="width:70%">
														<a-input-search></a-input-search>
													</div>
													<div style="white-space: nowrap; margin-left: 16px;">
														<a-button type="primary" @click="showDrawer()">
															创建项目
														</a-button>
													</div>
												</div>
												<div class="ingi-list-table">
													<div class="list-table-header">
														<div class="th name">
															<div class="title">项目名称</div>
														</div>
														<div class="th period">
															<div class="title">执行周期</div>
														</div>
														<div class="th actions">
															<div class="title">操作</div>
														</div>
													</div>
													<div class="list-table-body">
														<a-skeleton :loading="loading">
														<a-collapse v-model="activeKey" :bordered="false" :accordion="true">
															<template v-for="(item,index) in data">
																<a-collapse-panel :key="item.id" :showArrow="false">
																	<div slot="header" class="list-table-body-row">
																		<div class="td name">
																			<div class="title">{{item.name}}</div>
																		</div>
																		<div class="td period">
																			{{item.cycle}}
																		</div>
																		<div class="td actions">
																			<a-button-group size="small">
																				<a-button type="link">
																					查看
																				</a-button>
																				<a-button type="link">
																					编辑
																				</a-button>
																			</a-button-group>
																		</div>
																	</div>
																	<a-card title="Default size card" style="width: 300px">
																		<a slot="extra" href="#">more</a>
																		<p>card content</p>
																		<p>card content</p>
																		<p>card content</p>
																	</a-card>
																</a-collapse-panel>
															</template>
														</a-collapse>
														</a-skeleton>
													</div>
													<div class="list-table-footer"></div>
												</div>


												<a-pagination v-model="listQurey.page" :total="total" show-less-items />
												<!-- <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
                                                     :data-source="data">
                                                        <span slot="action" slot-scope="text, record">
                                                            <a-button size="small" style="margin-right: 10px;" type="primary">
                                                                审核
                                                            </a-button>
                                                            <a-button size="small" style="margin-right: 10px;" type="danger">
                                                                删除
                                                            </a-button>
                                                            <a-button @click="isView=true" size="small" style="margin-right: 10px;" type="default">
                                                                查看
                                                            </a-button>
                                                        </span>
                                                    </a-table> -->
											</div>
										</a-card>

									</div>
									<aside class="dashboard-side">
										<a-card title="快速操作"></a-card>
										<a-card title="申请与审批"></a-card>
										<a-card title="资源库"></a-card>
										<a-card title="技术支援"></a-card>
									</aside>
								</div>
							</a-tab-pane>
							<a-tab-pane key="2" tab="资源查看"></a-tab-pane>
						</a-tabs>
					</div>
				</div>
			</div>
			<div class="right-container-stage" v-show="isView">
				这里是详情
			</div>
		</div>
		<a-drawer title="Create a new account" :width="720" :visible="visible" :body-style="{ paddingBottom: '80px' }" @close="onClose">
			<a-steps :current="stepCurrent" size="small">
				<a-step title="基础信息" />
				<a-step title="补充信息" />
				<a-step title="验证信息" />
			</a-steps>
			<a-form-model ref="ruleForm" :model="project" :rules="rules" layout="vertical" hide-required-mark>
				<div v-show="stepCurrent === 0">
					<a-row :gutter="16" style="margin-top: 20px;">
						<a-col :span="12">
							<a-form-model-item label="项目名称" prop="name">
								<a-input v-model="project.name" placeholder="请输入项目名称" />
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<!-- :default-value="['a1', 'b2']" -->
							<a-form-model-item label="项目督导人员" prop="supervisor">
								<a-select mode="multiple" @change="supervisorChange">
									<a-select-option v-for="item in supervisor" :key=" item.id ">
										{{item.name}}
									</a-select-option>
								</a-select>
							</a-form-model-item>
						</a-col>
					</a-row>
					<a-row :gutter="16">
						<a-col :span="12">
							<a-form-model-item label="项目编码" prop="code">
								<a-input v-model="project.code" placeholder="请输入项目编码" />
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<!-- :default-value="['a1', 'b2']" -->
							<a-form-model-item label="准入机构行政人员" prop="administrationUser">
								<a-select mode="multiple" @change="administrationChange">
									<a-select-option v-for="item in administration" :key=" item.id ">
										{{item.name}}
									</a-select-option>
								</a-select>
							</a-form-model-item>
						</a-col>
					</a-row>
					<a-row :gutter="16">
						<a-col :span="24">
							<a-form-model-item label="项目周期" prop="cycle">
								<a-range-picker v-model="project.cycle" :locale="locale" format="YYYY-MM-DD" :disabled-date="disabledDate"
								 show-time @change="onChange">

								</a-range-picker>
							</a-form-model-item>
						</a-col>
					</a-row>
				</div>
				<div v-show="stepCurrent === 1">
					<a-row :gutter="16" style="margin-top: 20px;">
						<a-col :span="12">
							<a-form-model-item label="个人档案数" prop="personalFiles">
								<a-input v-model="project.personalFiles" type="number" placeholder="请输入个人档案数" />
							</a-form-model-item>
						</a-col>
						<a-col :span="12">

							<a-form-model-item label="个案数" prop="personalCase">
								<a-input v-model="project.personalCase" type="number" placeholder="请输入个案数" />
							</a-form-model-item>
						</a-col>
					</a-row>
					<a-row :gutter="16" style="margin-top: 20px;">
						<a-col :span="12">
							<a-form-model-item label="咨询服务对象数" prop="consultServicePerson">
								<a-input v-model="project.consultServicePerson" type="number" placeholder="请输入咨询服务对象数" />
							</a-form-model-item>
						</a-col>
						<a-col :span="12">

							<a-form-model-item label="咨询次数" prop="consultServiceCount">
								<a-input v-model="project.consultServiceCount" type="number" placeholder="请输入咨询次数" />
							</a-form-model-item>
						</a-col>
					</a-row>

					<a-row :gutter="16" style="margin-top: 20px;">
						<a-col :span="12">
							<a-form-model-item label="长期探访服务对象数" prop="longtimeServicePerson">
								<a-input v-model="project.longtimeServicePerson" type="number" placeholder="请输入长期探访服务对象数" />
							</a-form-model-item>
						</a-col>
						<a-col :span="12">

							<a-form-model-item label="长期探访次数" prop="longtimeServiceCount">
								<a-input v-model="project.longtimeServiceCount" type="number" placeholder="请输入长期探访次数" />
							</a-form-model-item>
						</a-col>
					</a-row>

					<a-row :gutter="16" style="margin-top: 20px;">
						<a-col :span="12">
							<a-form-model-item label="危机介入数" prop="dangerService">
								<a-input v-model="project.dangerService" type="number" placeholder="请输入危机介入数" />
							</a-form-model-item>
						</a-col>
					</a-row>
					<a-row :gutter="16" style="margin-top: 20px;">
						<a-col :span="24">
							<a-form-model-item label="项目相关图片">
								<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture-card" :file-list="fileList"
								 @preview="handlePreview" @change="handleChange">
									<div v-if="fileList.length < 8">
										<a-icon type="plus" />
										<div class="ant-upload-text">
											Upload
										</div>
									</div>
								</a-upload>
								<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
									<img alt="example" style="width: 100%" :src="previewImage" />
								</a-modal>
							</a-form-model-item>
						</a-col>
					</a-row>
				</div>
				<div v-show="stepCurrent === 2">
					<a-row :gutter="16" style="margin-top: 20px;">
						<h2>基础信息</h2>
					</a-row>
					<a-row :gutter="16" style="margin-top: 20px;">
						<a-col :span="12">
							<a-form-model-item label="项目名称" prop="name">
								<a-input v-model="project.name" placeholder="请输入项目名称" />
							</a-form-model-item>
						</a-col>
						<a-col :span="12">
							<a-form-model-item label="项目编码" prop="code">
								<a-input v-model="project.code" placeholder="请输入项目编码" />
							</a-form-model-item>
						</a-col>
					</a-row>
					<a-row :gutter="16">
						<a-col :span="24">
							<a-form-model-item label="项目周期" prop="cycle">
								<a-range-picker v-model="project.cycle" :locale="locale" format="YYYY-MM-DD" show-time :disabled-date="disabledDate"
								 @change="onChange">

								</a-range-picker>
							</a-form-model-item>
						</a-col>
					</a-row>

					<a-row :gutter="16" style="margin-top: 20px;">
						<h2>服务指标</h2>
					</a-row>
					<a-row :gutter="16" style="margin-top: 20px;">
						<a-col :span="12">
							<a-form-model-item label="个人档案数" prop="personalFiles">
								<a-input v-model="project.personalFiles" type="number" placeholder="请输入个人档案数" />
							</a-form-model-item>
						</a-col>
						<a-col :span="12">

							<a-form-model-item label="个案数" prop="personalCase">
								<a-input v-model="project.personalCase" type="number" placeholder="请输入个案数" />
							</a-form-model-item>
						</a-col>
					</a-row>
					<a-row :gutter="16" style="margin-top: 20px;">
						<a-col :span="12">
							<a-form-model-item label="咨询服务对象数" prop="consultServicePerson">
								<a-input v-model="project.consultServicePerson" type="number" placeholder="请输入咨询服务对象数" />
							</a-form-model-item>
						</a-col>
						<a-col :span="12">

							<a-form-model-item label="咨询次数" prop="consultServiceCount">
								<a-input v-model="project.consultServiceCount" type="number" placeholder="请输入咨询次数" />
							</a-form-model-item>
						</a-col>
					</a-row>

					<a-row :gutter="16" style="margin-top: 20px;">
						<a-col :span="12">
							<a-form-model-item label="长期探访服务对象数" prop="longtimeServicePerson">
								<a-input v-model="project.longtimeServicePerson" type="number" placeholder="请输入长期探访服务对象数" />
							</a-form-model-item>
						</a-col>
						<a-col :span="12">

							<a-form-model-item label="长期探访次数" prop="longtimeServiceCount">
								<a-input v-model="project.longtimeServiceCount" type="number" placeholder="请输入长期探访次数" />
							</a-form-model-item>
						</a-col>
					</a-row>

					<a-row :gutter="16" style="margin-top: 20px;">
						<a-col :span="12">
							<a-form-model-item label="危机介入数" prop="dangerService">
								<a-input v-model="project.dangerService" type="number" placeholder="请输入危机介入数" />
							</a-form-model-item>
						</a-col>

					</a-row>

					<a-row :gutter="16" style="margin-top: 20px;">
						<h2>相关人员</h2>
					</a-row>

					<a-row :gutter="16" style="margin-top: 20px;">
						<a-col :span="12">

							<a-form-model-item label="项目督导人员" prop="supervisor">
								<a-select v-model="project.supervisor" mode="multiple" @change="multiSelectChangge">
									<a-select-option v-for="item in supervisor" :key=" item.id ">
										{{item.name}}
									</a-select-option>
								</a-select>
							</a-form-model-item>
						</a-col>

						<a-col :span="12">

							<a-form-model-item label="准入机构行政人员" prop="administrationUser">
								<a-select v-model="project.administrationUser" mode="multiple" @change="multiSelectChangge">
									<a-select-option v-for="item in administration" :key=" item.id ">
										{{item.name}}
									</a-select-option>
								</a-select>
							</a-form-model-item>
						</a-col>

					</a-row>
					<a-row :gutter="16" style="margin-top: 20px;">
						<h2>相关图片信息</h2>
					</a-row>
					<a-row :gutter="16" style="margin-top: 20px;">
						<a-col :span="24">
							<a-form-model-item label="项目相关图片">
								<a-upload v-model="project.images" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture-card"
								 :file-list="fileList" @preview="handlePreview" @change="handleChange">
									<div v-if="fileList.length < 8">
										<a-icon type="plus" />
										<div class="ant-upload-text">
											Upload
										</div>
									</div>
								</a-upload>
								<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
									<img alt="example" style="width: 100%" :src="previewImage" />
								</a-modal>
							</a-form-model-item>
						</a-col>
					</a-row>

				</div>
			</a-form-model>

			<div :style="{
	          position: 'absolute',
	          right: 0,
	          bottom: 0,
	          width: '100%',
	          borderTop: '1px solid #e9e9e9',
	          padding: '10px 16px',
	          background: '#fff',
	          textAlign: 'right',
	          zIndex: 1,
	        }">
				<a-button :style="{ marginRight: '8px' }" @click="onClose">
					取消
				</a-button>
				<a-button type="primary" v-show="stepCurrent>0" :style="{ marginRight: '8px' }" @click="goPre">
					上一步
				</a-button>
				<a-button type="primary" v-show="stepCurrent !== 2" :style="{ marginRight: '8px' }" @click="goNext">
					下一步
				</a-button>
				<a-button type="danger" v-show="stepCurrent === 2" @click="onSubmit">
					提交
				</a-button>
			</div>
		</a-drawer>
	</div>
</template>
<script>
	import Vue from 'vue'
	import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
	import moment from 'moment';
	import {
		projectList,
		getSupervisor,
		getAdministration,
		createProject,
		getProjectByRole
	} from '@/api/list.js'
	import screen from '../../../components/screen'

	function getBase64(file) {
		return new Promise((resolve, reject) => {
			const reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = () => resolve(reader.result);
			reader.onerror = error => reject(error);
		});
	};
	const columns = [{
			title: '项目标题',
			dataIndex: 'name',
		},
		{
			title: '执行周期',
			dataIndex: 'age',
		},
		{
			title: '操作',
			key: 'action',
			scopedSlots: {
				customRender: 'action'
			},
		},
	];

	const data = [];
	export default {
		components: {
			screen
		},
		data() {
			return {
				demoLoading: true,
				current: 1,
				data,
				columns,
				isView: false,
				form: this.$form.createForm(this),
				visible: false,
				start: '',
				selectedRowKeys: [], // Check here to configure the default column
				loading: true,
				activeKey: [],
				listQurey: {
					page: 1,
					size: 10
				},
				total: 0,
				stepCurrent: 0,
				previewVisible: false,
				previewImage: '',
				fileList: [
					// {
					//   uid: '-1',
					//   name: 'image.png',
					//   status: 'done',
					//   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
					// },
					// {
					//   uid: '-2',
					//   name: 'image.png',
					//   status: 'done',
					//   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
					// }
				],
				supervisor: [],
				administration: [],
				rules: {
					name: [{
							required: true,
							message: '请输入项目名称',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 50,
							message: '长度为3到50个字符',
							trigger: 'blur'
						},
					],
					code: [{
						required: true,
						message: '请输入项目编码',
						trigger: 'blur'
					}, ],
					cycle: [{
						required: true,
						message: '请选择项目周期',
						trigger: 'blur'
					}, ],
					personalCase: [{
						required: true,
						message: '请输入个案数',
						trigger: 'blur'
					}, ],
					personalFiles: [{
						required: true,
						message: '请输入个人档案数',
						trigger: 'blur'
					}, ],
					consultServicePerson: [{
						required: true,
						message: '请输入咨询服务对象数',
						trigger: 'blur'
					}, ],
					consultServiceCount: [{
						required: true,
						message: '请输入咨询次数',
						trigger: 'blur'
					}, ],
					longtimeServicePerson: [{
						required: true,
						message: '请输入长期服务对象数',
						trigger: 'blur'
					}, ],
					longtimeServiceCount: [{
						required: true,
						message: '请输入长期服务次数',
						trigger: 'blur'
					}, ],
					dangerService: [{
						required: true,
						message: '请输入危机介入数',
						trigger: 'blur'
					}, ],
					supervisor: [{
						required: true,
						message: '请选择项目督导',
						trigger: 'blur'
					}, ],
					administrationUser: [{
						required: true,
						message: '请选择准入机构行政人员',
						trigger: 'blur'
					}, ],
				},
				project: {

				},
				locale,
				dateRange: '',
			};
		},
		computed: {
			hasSelected() {
				return this.selectedRowKeys.length > 0;
			},
		},
		created() {
			// 测试获取用户
			// console.log("test");
			// const user =JSON.parse(localStorage.getItem('user'));
			// console.log(user);
			// 测试获取用户选择登录的角色
			// 角色id对应的角色说明在README文件中
			// console.log(localStorage.getItem('roleId'));
			this.getProject();
			this.getSupervisorAndAdmin();
			// 黄麒宇添加  边栏菜单
			this.$emit('sideBarChange', {
				titleText: this.sidebarTitle,
				categories: this.sidebarCategories
			});
		},
		methods: {
			callback() {},
			handleMenuClick() {},
			showDrawer() {
				// 设置只有机构管理员能够创建项目,存入localStorage里取出来的是字符串
				if (localStorage.getItem('roleId') === '46') {
					this.visible = true;
				} else {

					this.$notification.error({
						message: '无创建项目权限',
						description: `您当前登录的角色不是机构管理员，不能创建项目`
					})
				}

			},
			onClose() {
				this.$refs.ruleForm.resetFields();
				this.stepCurrent = 0;
				this.visible = false;
			},
			onSubmit() {
				console.log(this.project);
				this.$refs.ruleForm.validate(valid => {
					if (valid) {

						delete this.project.cycle; // 直接赋值的话，控制台报错太难看
						this.project.cycle = this.dateRange;
						createProject(this.project)
							.then(res => {
								if (res.code == 200) {
									this.visible = false;
									this.$notification.success({
										message: 'success',
										description: `项目创建成功`
									})
									this.getProject();
								} else {
									this.visible = false;
									this.$notification.error({
										message: 'erroe',
										description: `创建失败，服务器异常`
									})
								}
							})

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			onSelectChange(selectedRowKeys) {
				console.log('selectedRowKeys changed: ', selectedRowKeys);
				this.selectedRowKeys = selectedRowKeys;
			},
			getProject() {
				if (localStorage.getItem('roleId') === '46') {
					projectList(this.listQurey)
						.then(res => {
							this.loading=false;
							this.data = res.data.records;
							this.total = res.data.total;
						})
				} else {
					// 非机构管理员时
					const parameter = {
						id: JSON.parse(localStorage.getItem('user')).id,
						roleId: localStorage.getItem('roleId')
					};
					getProjectByRole(parameter)
						.then(res => {
							this.loading=false;
							this.data = res.data;
							this.total = res.data.length;
							if (res.data.length === 0) {
								this.$notification.error({
									message: '无关联的项目',
									description: `您当前登录的角色没有关联的项目`
								})
							}
						})

				}

			},
			goNext() {
				this.stepCurrent = this.stepCurrent + 1;
			},
			goPre() {
				this.stepCurrent = this.stepCurrent - 1;
			},
			handleCancel() {
				this.previewVisible = false;
			},
			async handlePreview(file) {
				if (!file.url && !file.preview) {
					file.preview = await getBase64(file.originFileObj);
				}
				this.previewImage = file.url || file.preview;
				this.previewVisible = true;
			},
			handleChange({
				fileList
			}) {
				this.fileList = fileList;
				console.log(fileList)
				// this.ingi-project.images=[];
				// for(var i=0;i<fileList.length;i++){
				//  this.ingi-project.images.push(fileList[i].url)
				// }
			},
			multiSelectChangge(value) {
				console.log(value);
			},
			supervisorChange(value) {
				this.project.supervisor = value;
			},
			administrationChange(value) {
				this.project.administrationUser = value;
			},
			// 获取可选的项目督导和准入机构行政人员
			getSupervisorAndAdmin() {
				getSupervisor()
					.then(res => {
						this.supervisor = res.data
					});

				getAdministration()
					.then(res => {
						this.administration = res.data
					});
			},
			// 时间范围选择改变
			onChange(date, dateString) {
				// console.log(date, dateString);
				console.log(dateString) // 这里时两个时间格式化的字符串组成的数组
				this.dateRange = dateString[0] + '至' + dateString[1]
				console.log(this.dateRange)
			},
			disabledDate(current) {
				// Can not select days before today and today
				return current && current <= moment().endOf('day');
			}


		},
	};
</script>
